<template>
	<scroll-view v-show="!item.common.isHidden" scroll-y @tap="handleTap" class="myScrollLabel" :style="commonStyle">
		<view :style="innerStyle">{{ labelText(item.common.text) }}</view>
	</scroll-view>
</template>

<script>
	import {
		handleEvent,
		removeHTMLTag
	} from '../libs/utils.js';
	import calcBaseStyle from '../libs/calcBaseStyle'
	export default {
		name: 'myScrollLabel',
		props:{
			listData: null,
			pageConfig: {
				type: Object,
				default(){
					return {}
				}
			},
			pcid: null
		},
		data() {
			return {
				item: {
					common: {},
					style: {}
				},
			}
		},
		inject: ['options'],
		created() {
			this.$parent.widgetList.some(widget=>{
				if(widget.cid === this.pcid){
					this.item = widget
					return true
				}
			})
		},
		computed: {
			labelText() {
				return text => {
					return removeHTMLTag(text)
				}
			},
			commonStyle() {
				var basic = calcBaseStyle(this.item,this.pageConfig.contentH)
				var item = this.item
				return basic + 'border-radius:'+item.style.borderRadius+'rpx;border:'+item.style.borderStyle+' '+item.style.borderColor+' '+item.style.borderWidth+'rpx;background-color:'+item.style.bgColor+';opacity:'+item.style.opacity + ';'
			},
			innerStyle() {
				var item = this.item
				return (
					'font-size:' +
					item.style.fontSize +
					'rpx;letter-spacing:' +
					item.style.letterSpacing +
					'px;font-weight:' +
					item.style.fontWeight +
					';color:' +
					item.style.color +
					';text-align:' +
					item.style.textAlign +
					';text-indent:' +
					item.style.textIndent * item.style.fontSize +
					'rpx;line-height:' +
					item.style.lineHeight +
					'rpx;'
				);
			},
		},
		methods: {
			handleTap() {
				handleEvent(this.item.event, this.listData || {}, this.pageConfig, this.options);
			},
		}
	}
</script>

<style lang="less" scoped>
	.myScrollLabel {
		position: absolute;
		box-sizing: border-box;
		overflow: hidden;
		white-space: normal;
	}
</style>
